<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气预报</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        #app {
            display: flex;
            justify-content: center;
            background-color: orange;
        }

        #container {

            margin: 0 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-for="item in list" id="container">
            <p>{{item.date}}</p>
            <p>{{item.type}}</p>
            <p>{{item.low}}</p>
            <p>{{item.high}}</p>
            <p>{{item.fengxiang}}</p>
            <p>{{item.fengli}}</p>
        </div>
    </div>


    <script>
        var app = new Vue({
            el: "#app",
            data: {
                list: []
            },
            created() {

                let url = "http://wthrcdn.etouch.cn/weather_mini?city=苏州";
                let xhr = new XMLHttpRequest();
                xhr.open("GET", url);
                xhr.send();
                xhr.onload = function () {
                    let result = JSON.parse(xhr.response);
                    app.list = result.data.forecast;
                }
            },

        });



    </script>
</body>

</html>